<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>
  <view>
    <view class="index">

      <!--顶部-->
      <u-navbar
          :safeAreaInsetTop="false"
          :placeholder="false"
          :is-back="true"
          :is-fixed="true"
          title="相册中心"
          :border-bottom="false"
          :title-bold="true"
          :title-color="'#111111'"
          :background="{ background : navBg }"
      >
      </u-navbar>

      <view class="page-main" v-if="myUserInfo && myUserInfo.album && albumList.length > 0">
        <view class="page-box">
          <view class="page-imgList">
            <view v-for="(item,index) of albumList" :key="index" class="imgList-item">
              <u-icon @click="deletePic(index)" color="#ff5500" name="close-circle-fill" size="50rpx"
                      class="item-close"></u-icon>
              <image :src="item"
                     mode="aspectFill" class="item-pic"></image>
            </view>
          </view>
        </view>
      </view>

      <view class="page-bottom" @click="uploadPic">
        <view class="bottom-btn">
          上传图片
        </view>
      </view>
      <view class="page-bottomFooter"></view>
    </view>
  </view>
</template>
<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {onLoad, onPageScroll, onShow} from "@dcloudio/uni-app";
import {getGuestsInfo, getUserInfoApi, updateUserInfoApi} from "@/api/new";
import {uploadImage} from "@/api/app";
import {useUserStore} from "@/stores/user";

const scrollTop = ref<number>(0)
const navBg = ref<string>('rgba(255,255,255,0)')

onPageScroll((event: any) => {
  scrollTop.value = event.scrollTop
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
})

const deletePic = (index: any) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该图片吗？',
    success: async function (res) {
      if (res.confirm) {
        albumList.value.splice(index, 1)
        await updateUserInfo(JSON.stringify(albumList.value))
        uni.showToast({
          title: '删除成功',
          icon: 'none'
        })
      }
    }
  });
}

const userStore = useUserStore()

const updateUserInfo = async (value:any) => {
  await updateUserInfoApi({
    field: 'album',
    value,
  })
}

let albumListNumber = ref(0)


const uploadPic = () => {
  uni.chooseImage({
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    extension: ['png', 'jpeg','jpg'], //根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。
    sourceType: ['album'], //从相册选择
    success: function (res) {
      const tempFilePaths = res.tempFilePaths;
      albumListNumber.value += tempFilePaths.length
      for(let i = 0;i < tempFilePaths.length; i++) {
        uploadImageIng(tempFilePaths[i],albumListNumber.value)
      }
    }
  });
}

const uploadImageIng = async (file: string,num: number) => {
  uni.showLoading({
    title: '正在上传中...'
  })
  try {
    const res: any = await uploadImage(file, userStore.temToken!)
    uni.hideLoading()
    albumList.value.push(res.uri)
    if (num === albumList.value.length) {
      albumListNumber.value = num
      updateUserInfo(JSON.stringify(albumList.value))
    }
  } catch (error) {
    uni.hideLoading()
    uni.$u.toast(error)
  }
}


let albumList = ref([])
let myUserInfo = ref()

const getUserInfo = async () => {
  myUserInfo.value = await getUserInfoApi({})
  if (myUserInfo.value.album) {
    albumList.value = JSON.parse(myUserInfo.value.album)
    albumListNumber.value = JSON.parse(JSON.stringify(albumList.value)).length
  }
}

onShow(() => {
  getUserInfo()
})

</script>
<style lang="scss">

page {
  position: relative;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(var(--color-primary) 10%, transparent);
    opacity: 0.2;
  }
}
</style>
<style scoped lang="scss">
.index {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  width: 100%;
  transition: all 1s;
  min-height: calc(100vh - env(safe-area-inset-bottom));
}

.page-main {
  padding: 0 30rpx;
}

.page-imgList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;

  .imgList-item {
    width: 100%;
    height: 200rpx;
    position: relative;

    .item-close {
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(50%, -50%);
      z-index: 1;
    }

    .item-pic {
      width: 100%;
      height: 200rpx;
      border-radius: 20rpx;
    }
  }
}


.page-bottom {
  width: 100%;
  padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .bottom-total {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 30rpx;
    font-weight: bold;
    color: #111111;
    margin-right: 50rpx;
    flex-shrink: 0;

    .total-number {
      color: var(--color-primary);
    }
  }

  .bottom-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
    color: #ffffff;
    font-size: 30rpx;
    font-weight: bold;
    border-radius: 40rpx;
  }

  &Footer {
    height: calc(140rpx + env(safe-area-inset-bottom));
  }
}

</style>